<template>
	<view>
		<view class="c-box" id="postDemand">
		    <view v-show="showDemand">
		        <view style="background-color: white">
		            <view class="demandStepList">
		                <view class="item">
		                    <view>
		                        <view >
		                            <view class="item-span"><view style="color: red">*</view>需求名称</view>
		                        </view>
		                        <input class="demand-input" type="text" v-model="title" placeholder="请输入需求名称"/>
		                    </view>
		                </view>
		            </view>
		            <view class="demandStep" style="border-top: 1px solid gainsboro">
		                <view><view style="color: red;">*</view>需求描述</view>
		                <textarea placeholder="请输入需求描述" v-model="content" ></textarea>
		            </view>
		            <view class="demandStep" style="border-top: 1px solid gainsboro">
		                <view>上传图片附件<view style="color: red">（注:最多可上传4张）</view></view>
		                <input type="file" style="display: none" ref="uploadImg"
		                       accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
		                       multiple id="uploadImg" class="uploadImg" @change="uploadImg()"/>
		                <image v-for="(item,index) in news.imgList" :src="item" class="img-item" @click="ifDeleteImg(index)"/>
		                <image class="addImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_add.png"
		                     @click="clickUpload()"/>
		            </view>
		            <view class="addTag" @click="toTag">
		                <view class="addText"><view style="color: red">*</view>添加标签</view>
		                <image class="addIcon" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png"/>
		            </view>
		            <view class="tagList">
		                <view class="tag-item" v-for="item in useTagList">
		                    <view class="tag-text">{{item.tagName}}</view>
		                </view>
		            </view>
		            <view class="demandClassify">
		                <view class="addText"><view style="color: red">*</view>选择分类</view>
		            </view>
		            <view class="demandClassify">
						<radio-group @change="chooseClass" class="">
							<label class="classify-radio" v-for="item in demandClassifyList">
								<radio :value="item.id" :checked="item.id == demandClassifyId"/>{{item.className}}
							</label>
						</radio-group>
		            </view>
		            <view class="addPhone">
		                <view class="phoneTest">是否公开联系电话</view>
						<radio-group @change="publicPhone" class="phoneRadio">
							<label class="radio">
								<radio value="0" :checked="ifPhone == '0'"/>否
							</label>
							<label class="radio">
								<radio value="1" :checked="ifPhone == '1'"/>是
							</label>
						</radio-group>
		              <!--  <view class="phoneRadio">
		                    <input type="radio" name="ifPhone"  v-model="ifPhone" checked="checked"/> 否
		                </view>
		                <view class="phoneRadio">
		                    <input type="radio" name="ifPhone"  v-model="ifPhone"/> 是
		                </view> -->
		            </view>
		        </view>
		        <view style="display: flex;justify-content: center;margin-top: 100rpx">
		            <view class="uploadbutton" style="display:flex;justify-content: center;align-items: center;" :loading="releaseLoading" :disabled="releaseLoading" @click="release()">确定发布</view>
		        </view>
		        <view class="c-h120"></view>
		    </view>
		    <view v-show="showTag" style="background-color: white">
		        <view style="padding-top:11px;display: flex;flex-direction: row;margin-left: 22px;align-items: center;">
		            <image style="width:11px;height: 22px;" class="goback seo-goback"
		                 src="/static/image/goback.png"
		                 @click="showTag = false;showDemand = true;"/>
		        </view>
		        <view style="padding-top: 0.3rem;">
		            <view class="sort">
		                <view class="sort-ul">
		                    <view class="sort-li" v-for="item in useTagList">
		                        <view class="sort-a" href="javascript:void(0);">{{item.tagName}}</view>
		                        <image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_cha.png"
		                             style="width: 22px;margin-left: -22px;height: 22px;" @click="delTag(item)"/>
		                    </view>
		
		                </view>
						<view style="display: flex;">
							<input placeholder="自定义标签，不超过十个汉字" class="tagInput" v-model="tagName">
							<view class="tagAdd" @click="addTag">添加</view>
						</view>
		                <view style="border-top: 1px solid #dbdbdb; width: 504rpx;max-height: 420rpx;overflow-y: auto"
		                     v-if="tagList.length>0">
		                    <view v-for="(item,i) in tagList" :key="item.id" style="width: 490rpx; height: 70rpx; padding-left: 14rpx;
		                            background-color: #f5f5f5;line-height: 70rpx;" @click="useTagItem(item)">
		                        {{ item.tagName }}
		                    </view>
		                </view>
		            </view>
		            <view style="background-color: #f5f5f5; height: 10rpx"></view>
					<view style="padding-top: 60rpx;display: block;">
						<view style="margin-left: 30rpx;font-size: 30rpx;margin-top: 20rpx;">注：标签可以多选</view>
						<view class="sort" style="padding-top: 60rpx;display: block;">
							<view>推荐标签</view>
							<view class="sort-ul">
								<view class="sort-li" v-for="item in recomTagList">
									<view class="sort-a"  href="javascript:void(0);" @click="userTag(item)">{{item.tagName}}</view>
								</view>
							</view>
						</view>
					</view>
		            <view style="padding-top: 6rem;padding-bottom: 2rem">
		                <view class="tagSave" @click="returnDemand">完成</view>
		            </view>
		        </view>
		    </view>
		    <view class="showbox" v-show="load">
		        <view class="loader">
		           <!-- <svg class="circular" viewBox="25 25 50 50">
		                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10">
		                </circle>
		            </svg> -->
		        </view>
		    </view>
		</view>
		
	</view>
</template>

<script>
	import uploadApi from '@/api/uploadDemand.js';
	import commonApi from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
			    classNameStr: [],
				originClassifyList: [],
				brandClassifyList: [],
				industryList: [],
				productAttrList: [],
				brandId: '',
				classId: '',
				industryId: '',
				originId: '',
				priceStart: '',
				priceEnd: '',
				productModel: '',
				productAttrId: [],
				productAttrVal: [],
		
				title: '',
				content: '',
				news: {
					imgList: [],//图片
				},
				showDemand: true,
				showTag:false,
				tagName: '',
				useTagList: [],
				tagList: [],
				addTagIsClick: true,
				recomTagList: [],
				ifPhone: 1,
				demandClassifyList: [],//需求分类
				demandClassifyId: '',
				load: false,
				releaseLoading:false,
			};
		},
		onLoad() {
			this.getRecomTagList();
			this.getDemandClassify();
		},
		
		watch: {
			tagName(){
				if(this.tagName){
					commonApi.getTagList(this.tagName).then(res =>{
						this.tagList = res.data.page.list
					})
				}
			}
		},
		methods: {
			publicPhone(e){
				console.log(e.detail.value);
				this.ifPhone = e.detail.value
			},
			chooseClass(e){
				console.log(e.detail.value);
				this.demandClassifyId = e.detail.value
			},
			//上传图片
			clickUpload() {
				
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						var that = this
						
						let headers = {
						  "token": uni.getStorageSync("authorize").token,
						  cookie: uni.getStorageSync('cookie')
						};
						res.tempFilePaths.forEach((item,index,array) =>{
							//上传
							uni.uploadFile({
								url: 'https://m.nocexpo.com/sys/oss/upload',
								filePath: item,
								name: 'file',
								header: headers,
								success: (res) => {
									let result = JSON.parse(res.data)
									if (result.code == 0){
										console.log(result.url);
										that.news.imgList.push(result.url)
									}
								}
							})
						})
						
					}.bind(this)
				});
			},
			//微信上传咨询图片
			tailorNewsImg(img,canvas,ctx){
				let _this = img
				// 创建属性节点
				var anw = document.createAttribute("width");
				anw.nodeValue = _this.width;
				var anh = document.createAttribute("height");
				anh.nodeValue = _this.height;
				canvas.setAttributeNode(anw);
				canvas.setAttributeNode(anh);
				ctx.drawImage(img,0,0,_this.width,_this.height);
				let finalDataURL= canvas.toDataURL("image/jpeg", 1.0);
				let finalFile = convertBase64UrlToBlob(finalDataURL)
				let compressFile = {urlFile:finalFile,fileName:"newsImg.jpg"};
				uploadNewsImg(compressFile)
			},
			uploadImg(el) {
				let fileList = el.target.files;
				if(fileList.length > 4 || fileList.length + this.news.imgList.length > 4){
					layer.open({
						content: '图片最多只能选择4张！',
						btn: '确定'
					});
					return;
				}
				if(fileList.length > 0){
					this.load = true;
				}
				Object.keys(fileList).forEach((value, index, array) => {
					//循环读取文件
					let fileReader = new FileReader();
					let img = new Image();
					fileReader.onload = (event) => {
						img.src = event.target.result
						img.onload = function () {
							// 旋转图片
							let newImage = rotateImage(img);
							newImage.name = fileList[value].name;
							imgCompress(newImage, {quality: 0.2}, uploadNewsImg)
						};
					}
					fileReader.readAsDataURL(fileList[value]);
				})
			},
			//是否删除图片
			ifDeleteImg(imgIndex) {
				const self = this
				
				uni.showModal({
					title: "",
					content: "是否删除照片?",
					showCancel:true,
					success: function (res) {
						if (res.confirm) {
							var that = this
							that.news.imgList.splice(imgIndex, 1)
							console.log('用户点击确定');
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
				
			},
			toTag() {
				this.showDemand = false;
				this.showTag = true;
			},
			returnDemand() {
				this.showDemand = true;
				this.showTag = false;
			},
			//标签
			getRecomTagList() {
				uploadApi.getRecomTagList().then(res => {
					this.recomTagList = res.data.page.list;
				})
			},
			addTag() {
				if(this.addTagIsClick){
					this.addTagIsClick = false;
					if (!this.tagName.trim()) {
						uni.showModal({
							title: "",
							content: "请填写标签名!",
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						return;
					}
					uploadApi.saveTag(this.tagName).then(res => {
						
						uni.showModal({
							title: "",
							content: "添加成功!",
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
						let useItem = {
							id: res.data.nocTag.id,
							tagName: '#'+res.data.nocTag.tagName,
						}
						this.useTagList.push(useItem);
						this.tagName = '';
						
						this.addTagIsClick = true;
					})
				}
			},
			userTag(tagInfo) {
				//校验是否已使用
				for (let i = 0; i < this.useTagList.length; i++) {
					if(this.useTagList[i].id == tagInfo.id){
					
						uni.showModal({
							title: "",
							content: "标签已选择",
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					
						return;
					}
				}
				let useItem = {
					id: tagInfo.id,
					tagName: '#'+tagInfo.tagName,
				}
				this.useTagList.push(useItem);
			},
			useTagItem(tagInfo){
				this.userTag(tagInfo);
				this.tagName = '';
				this.tagList = [];
			},
			delTag(tagInfo){
				
				uni.showModal({
					title: "",
					content: "确定删除？",
					showCancel:true,
					success: function (res) {
						if (res.confirm) {
							var that = this
							for (let i = 0; i < that.useTagList.length; i++) {
								if(that.useTagList[i].id == tagInfo.id){
									that.useTagList.splice(i,1);
									break;
								}
							}
							console.log('用户点击确定');
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
				
			},
			release() {
				console.log("release方法");
				// this.releaseLoading = true;
				// const ifJudgedPhone = await judgeIfPhone()
				// if (!ifJudgedPhone) {
				// 	this.releaseLoading = false;
				// 	return
				// }
				// const result = await judgeNocuserUserInfo()
				// if (!result) {
				// 	this.releaseLoading = false;
				// 	return
				// }
				let title = this.title
				if (!title) {
					
					uni.showModal({
						title: "",
						content: "请填写需求名称!",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					this.releaseLoading = false;
					return;
				}
				let content = this.content;
				if(!content){
					
					uni.showModal({
						title: "",
						content: "请填写需求描述!",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					this.releaseLoading = false;
					return;
				}
				let useTagList = this.useTagList
				if (useTagList.length == 0){
					
					uni.showModal({
						title: "",
						content: "请选择标签!",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					this.releaseLoading = false;
					return;
				}
				if(!this.demandClassifyId){
					uni.showModal({
						title: "",
						content: "请选择需求分类!",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					this.releaseLoading = false;
					return;
				}
				console.log("save");
				uploadApi.saveDemand(
						title,content,this.news.imgList,useTagList,this.ifPhone,this.demandClassifyId
					).then(res => {
					if (res.data.code == 0) {
						
						uni.showModal({
							title: "提示",
							content: "需求发布成功",
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						
						uni.showModal({
							title: "提示",
							content: "需求发布失败",
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
					}
				})
			},
			getDemandClassify() {
				uploadApi.getDemandClassify().then(res => {
					this.demandClassifyList = res.data.list
				})
			},
	
			getClassNameStr(classId) {
				uploadApi.getClassNameStr(classId).then(res => {
					this.classNameStr = res.data.classNameStr
				})
			},
			getOriginClassify() {
				uploadApi.getOriginClassify().then(res => {
					this.originClassifyList = res.data.list
	
				})
			},
			getBrandClssify() {
				uploadApi.getBrandClssify().then(res => {
					this.brandClassifyList = res.data.list
				})
			},
			getIndustry() {
				uploadApi.getIndustry().then(res => {
					this.industryList = res.data.list
				})
			},
			getProductAttrList(classId) {
				uploadApi.getProductAttrList(classId).then(res => {
					this.productAttrList = res.data.list
					for (let i = 0; i < this.productAttrList.length; i++) {
						this.productAttrId[i] = this.productAttrList[i].id
					}
				})
			},
			startMatch() {
				let title = this.title
				if (!title) {
					uni.showModal({
						title: "提示",
						content: "请填写标题",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let classId = this.classId
				if (!classId) {
					
					uni.showModal({
						title: "提示",
						content: "请选择产品分类！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let productModel = this.productModel
				if (!productModel) {
					
					uni.showModal({
						title: "提示",
						content: "请填写型号！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let industryId = this.industryId
				if (!industryId) {
					
					uni.showModal({
						title: "提示",
						content: "请选择行业！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let originId = this.originId
				if (!originId) {
					
					uni.showModal({
						title: "提示",
						content: "请选择产地范围！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let priceStart = this.priceStart
				if (!priceStart) {
					
					uni.showModal({
						title: "提示",
						content: "请填写预算范围！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
				if (isNaN(priceStart)) {
					
					uni.showModal({
						title: "提示",
						content: "预算只能填写数字！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
				if(priceStart < 0){
					
					uni.showModal({
						title: "提示",
						content: "预算不能填写负数！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let priceEnd = this.priceEnd
				if (!priceEnd) {
					
					uni.showModal({
						title: "提示",
						content: "请填写预算范围！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
				if (isNaN(priceEnd)) {
					
					uni.showModal({
						title: "提示",
						content: "预算只能填写数字！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				if(priceEnd < 0){
					
					uni.showModal({
						title: "提示",
						content: "预算不能填写负数！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let brandId = this.brandId
				if (!brandId) {
					
					uni.showModal({
						title: "提示",
						content: "请选择品牌！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
	
				let productAttrId = this.productAttrId
				let productAttrVal = this.productAttrVal
				if (productAttrId.length != productAttrVal.length) {
					
					uni.showModal({
						title: "提示",
						content: "请填写参数！",
						confirmrText:"我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
				uploadApi.saveDemand2(
						title,brandId,classId,industryId,originId,priceStart,priceEnd,productModel,productAttrId,productAttrVal
					).then(res => {
					if (res.data.code == 0) {
						window.location.href = "matchResult.html?demandId=" + res.data.demandId;
					} else {
						layer.alert(res.data.msg)
					}
				})
	
			},
		}
	}
</script>

<style>
	.demandStepList .item {
	    padding: 0 20rpx;
	    background: #fff;
	}
	.demandStepList .item .item-span {
	    float: left;
	    line-height: 100rpx;
	    font-size: 30rpx;
	    color: #000000;
		display: flex;
	}
	.demandStep {
	    background: #fff;
	    padding: 0 0.4rem 0.4rem 0.4rem;
	}
	.demandStep textarea {
		padding: 20rpx 40rpx;
		border: 0;
		background: #f5f5f5;
		font-size: 20rpx;
		line-height: 55px;
		height: 100rpx;
		width: auto;
		resize: none;
	}
	.demandStep view{
		font-size: 30rpx;
		color: #000000;
		line-height: 100rpx;
		display: flex;
	}
	.addImg {
		border: 2px solid #e2e2e2;
		border-radius: 20rpx;
		width: 160rpx;
		height: 160rpx;
		vertical-align: middle;
		margin: 20rpx;
	}

	.addTag {
		margin: 0 20rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid gainsboro
	}

	.addText {
		font-size: 30rpx;
		color: #000000;
		line-height: 50rpx;
		width: 300rpx;
		display: flex;
	}

	.tagList {
		margin: 0rem 0.4rem 0rem 0.4rem;
		justify-content: center;
		align-items: center;
	}

	.tag-item {
		display: inline-block;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		height: 30rpx;
		background-color: rgba(229, 245, 245, .7);
		border-radius: 15rpx;
		line-height: 30rpx;
	}

	.tag-text {
		font-size: 25rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #029E9D;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.addIcon {
		width: 20rpx;
		height: 30rpx;
		padding-top: 25rpx;
		padding-left: 550rpx;
	}

	.addPhone {
		margin: 0 20rpx;
		padding: 20rpx 0;
		justify-content: space-between;
		border-top: 1px solid gainsboro;

	}

	.phoneTest {
		font-size: 30rpx;
		color: #000000;
	}

	.phoneRadio {
		font-size: 30rpx;
		color: #000000;
		float: right;
		margin-right: inherit;
	}

	.img-item {
		border-radius:20rpx;
		width: 160rpx;
		height:  160rpx;
		vertical-align: middle;
		margin: 10rpx;
	}

	.sort {
		padding: 0 20rpx 20rpx 20rpx;
		background: #fff;
	}
	
	.sort h3 {
		font-size: 0.35rem;
		color: #333333;
		margin-bottom: 0.32rem;
		font: revert;
		font-weight: bold;
	}
	
	.sort .sort-ul {
		overflow: hidden;
	}
	
	.sort .sort-li {
		float: left;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.sort .sort-a {
		display: inline-block;
		padding: 0 35rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #f5f5f9;
		border-radius: 35rpx;
	}

	.tagInput {
		display:inline-block;
		border-radius: 35rpx;
		line-height: 70rpx;
		width: 450rpx;
		height: 70rpx;
		background-color: #f5f5f5;
		padding:0 40rpx;
	}

	.tagAdd {
		display: inline-block;
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #029e9d;
		color: white;
		border-radius: 10rpx;
		width: 150rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.tagSave {
		width: 700rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #029e9d;
		border-radius: 60rpx;
		display: block;
		margin: 50rpx auto 0 auto;
		font-size: 40rpx;
		font-weight: bold;
	}

	.demand-input {
		/* margin-left: 0.16rem; */
		width: 100%;
		border: 0;
		font-size: 20rpx;
	}
	.demandClassify{
		margin: 0 20rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid gainsboro
	}
	.classify{
		margin: 0rem 0.4rem 0rem 0.4rem;
		justify-content: center;
		align-items: center;
	}
	.classify-radio{
		font-size: 25rpx;
		color: #000000;
		display: inline-block;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.loader {
		position: relative;
		margin: 0 auto;
		width: 60px;
	}

	.loader:before {
		content: '';
		display: block;
		padding-top: 100%;
	}

	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite,
		color 6s ease-in-out infinite;
		stroke-linecap: round;
	}
	.uploadbutton {
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: #029e9d;
		border-radius: 40rpx;
		display: block;
		margin: 0.4rem auto 0 auto;
		font-size: 35rpx;
		font-weight: bold;
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}

	@keyframes color {
		100%,
		0% {
			stroke: #45494a;
		}
		40% {
			stroke: #45494a;
		}
		66% {
			stroke: #45494a;
		}
		80%,
		90% {
			stroke: #45494a;
		}
	}

	body {
		background-color: #eee;
	}

	.showbox {
		width: 700px;
		height: 200px;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 9999;
		/*设定这个view的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/
		/*宽为400,那么margin-top为-200px*/
		/*高为200那么margin-left为-100px;*/
		margin: -100px 0 0 -350px;
	}
</style>